<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Student form</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .form-group {
            margin-bottom: 20px;
        }

        .error {
            color: #d9534f;
            font-size: 14px;
        }
    </style>
</head>
<body th:object="${student}">
<div class="container">
    <h1 th:if="*{id}">Edit student</h1>
    <h1 th:unless="*{id}">Add a student</h1>
    <form method="post" class="form-horizontal"
          th:action="@{*{id} == null ? '/student/add' : '/student/edit'}">
        <input th:field="*{id}" type="hidden">
        <span th:errors="*{id}">Id Error</span>
        <div class="form-group" th:classappend="${#fields.hasErrors('no')} ? 'has-error'">
            <label for="no" class="col-sm-2 control-label">No.</label>
            <div class="col-sm-10">
                <input th:field="*{no}" type="text" class="form-control" id="no"
                       placeholder="Enter student No."/>
                <span th:if="${#fields.hasErrors('no')}" class="error" th:errors="*{no}">No. Error</span>
            </div>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('firstname')} ? 'has-error'">
            <label for="firstname" class="col-sm-2 control-label">Firstname</label>
            <div class="col-sm-10">
                <input th:field="*{firstname}" type="text" class="form-control" id="firstname"
                       placeholder="Enter student Firstname."/>
                <span th:if="${#fields.hasErrors('firstname')}" class="error"
                      th:errors="*{firstname}">Firstname Error</span>
            </div>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('lastname')} ? 'has-error'">
            <label for="lastname" class="col-sm-2 control-label">Lastname</label>
            <div class="col-sm-10">
                <input th:field="*{lastname}" type="text" class="form-control" id="lastname"
                       placeholder="Enter student Lastname."/>
                <span th:if="${#fields.hasErrors('lastname')}" class="error"
                      th:errors="*{lastname}">Lastname Error</span>
            </div>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('gender')} ? 'has-error'">
            <label class="col-sm-2 control-label">Gender</label>
            <div class="col-sm-10">
                <div class="radio-inline">
                    <label>
                        <input th:field="*{gender}" type="radio" value="M">Male
                    </label>
                </div>
                <div class="radio-inline">
                    <label>
                        <input th:field="*{gender}" type="radio" value="F">Female
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('birthday')} ? 'has-error'">
            <label for="birthday" class="col-sm-2 control-label">Birthday</label>
            <div class="col-sm-10">
                <input th:field="*{birthday}" type="date" class="form-control" id="birthday"/>
                <span th:if="${#fields.hasErrors('birthday')}" class="error"
                      th:errors="*{birthday}">Birthday Error</span>
            </div>
        </div>
        <div class="form-group" th:classappend="${#fields.hasErrors('email')} ? 'has-error'">
            <label for="email" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <input th:field="*{email}" type="email" class="form-control" id="email"
                       placeholder="Enter student Email."/>
                <span th:if="${#fields.hasErrors('email')}" class="error" th:errors="*{email}">Email Error</span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="reset" class="btn btn-default">Reset</button>
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>